<template>
  <div class="stock-task-card">
    <a-card :body-style="{ paddingBottom: 20 }" hoverable>
      <a-card-meta>
        <template slot="title">
          {{ data.task_name }}
          <a-tag color="#ddd">编号：{{ data.task_num }}</a-tag>
        </template>
        <template slot="avatar">
          <a-avatar size="small" :src="data.thumb" />
        </template>
      </a-card-meta>
      <template slot="actions">
        <a-tooltip title="列表">
          <a-icon type="stock" @click="showStockListModal" />
        </a-tooltip>
        <a-tooltip title="历史">
          <a-icon type="history" />
        </a-tooltip>
        <a-dropdown>
          <a class="ant-dropdown-link">
            <a-icon type="ellipsis" />
          </a>
          <a-menu slot="overlay">
            <a-menu-item>
              <a-icon type="setting" />设置
            </a-menu-item>
            <a-menu-item>
              <a-icon type="notification" />通知
            </a-menu-item>
            <a-menu-item>
              <a-icon type="delete" theme="filled" />删除
            </a-menu-item>
          </a-menu>
        </a-dropdown>
        <a-tooltip title="状态">
          <a-switch defaultChecked />
        </a-tooltip>
      </template>
      <div style="margin-top:10px">
        <div style="width:200px;height:130px;margin:0 auto">
          <ve-ring
            :data="chartData"
            :after-config="afterConfig"
            :settings="chartSettings"
            :legend-visible="false"
          ></ve-ring>
        </div>
        <a-tooltip :title="'数量：'+data.match.success">
          <a-progress
            :percent="data.match.success_percent"
            size="small"
            status="active"
            strokeColor="#52c41a"
          />
        </a-tooltip>
        <a-tooltip :title="'数量：'+data.match.fail">
          <a-progress
            :percent="data.match.fail_percent"
            size="small"
            status="active"
            strokeColor="#f5222d"
          />
        </a-tooltip>
      </div>
    </a-card>
    <stock-list-modal
      :id="data.id"
      :visible="stockListVisible"
      @handleCancel="handleStockListCancel"
    ></stock-list-modal>
  </div>
</template>

<script>
import StockListModal from './StockListModal'
export default {
  props: {
    data: {
      type: Object,
      required: true
    }
  },
  components: { StockListModal },
  data() {
    this.chartSettings = {
      radius: [35, 55],
      offsetY: 65,
      labelLine: {
        smooth: true,
        length: 2,
        length2: 10
      },
      itemStyle: {
        borderColor: '#fff',
        borderWidth: 1
      },
      labelMap: {
        type: '类型',
        amount: '金额'
      }
    }
    return {
      stockListVisible: false,
      chartTotal: 0,
      chartData: {
        columns: ['type', 'amount'],
        rows: this.data.chartData
      }
    }
  },
  created() {
    this.chartTotal = this.data.chartData[0]['amount'] - this.data.chartData[1]['amount']
  },
  methods: {
    afterConfig(options) {
      options.graphic = {
        type: 'text',
        style: {
          x: 100,
          y: 60,
          text: this.chartTotal,
          textAlign: 'center',
          fontSize: 11,
          fill: this.chartTotal > 0 ? '#f5222d' : '#52c41a'
        }
      }
      console.log(options)
      return options
    },
    showStockListModal() {
      this.stockListVisible = true
    },
    handleStockListCancel() {
      this.stockListVisible = false
    }
  }
}
</script>
